<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <style>
      body {
        background-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="layui-form layuimini-form">
      <div class="layui-form-item">
        <label class="layui-form-label">父部门</label>
        <div class="layui-input-block">
          <div class="layui-inline" style="width: 235px">
            <input
              type="text"
              placeholder="不填则为最顶级菜单"
              autocomplete="off"
              class="layui-input"
              id="parentName"
            />
            <input type="hidden" name="parentId" value="0" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label required">部门名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="deptName"
            lay-verify="required"
            lay-reqtext="菜单名称不能为空"
            placeholder="请输入用菜单名称"
            value=""
            class="layui-input"
          />
          <tip>填写菜单名称。</tip>
          <input type="hidden" name="deptId" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label required">部门类型</label>
        <div class="layui-input-block">
          <input type="radio" name="type" value="0" title="部门" />
          <input type="radio" name="type" value="1" title="分公司" />
          <input type="radio" name="type" value="2" title="地区" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label required">显示顺序</label>
        <div class="layui-input-block">
          <input type="number" name="orderNum" placeholder="请输入顺序" value="" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label required">部门状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="0" title="正常" />
          <input type="radio" name="status" value="1" title="停用" />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
      </div>
    </div>
    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>

    <script th:inline="none">
      layui.use(["form", "layer", "tableSelect"], function () {
        var form = layui.form,
          layer = layui.layer;
        var tableSelect = layui.tableSelect;
        var $ = layui.jquery;

        window.init = function (formObj) {
          $("[name='parentId']").val(formObj.parentId);
          $("[name='deptId']").val(formObj.deptId);
          $("[name='deptName']").val(formObj.deptName);
          $("[name='orderNum']").val(formObj.orderNum);
          $(`[name='type'][value=${formObj.type}]`).attr("checked", true);
          $(`[name='status'][value=${formObj.status}]`).attr("checked", true);
          form.render("radio");
          if (formObj.parentId != 0) {
            $.ajax({
              url: "/sys-dept/" + formObj.parentId,
              type: "post",
              async: false,
              success: function (result) {
                if (result.success) {
                  let data = result.data;
                  $("#parentName").val(data.deptName);
                }
              },
            });
          }
        };
        //监听提交
        form.on("submit(saveBtn)", function (data) {
          console.log(JSON.stringify(data.field));
          if (1 == 1) {
            $.ajax({
              url: "/sys-dept/update",
              type: "post",
              async: false,
              data: JSON.stringify(data.field),
              contentType: "application/json",
              success: function (result) {
                if (result.success) {
                  layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    console.log(parent.layui);
                    console.log(parent.layui.$("#btn-refresh"));
                    parent.layui.$("#btn-refresh").click();
                  });
                } else {
                  layer.msg(result.msg, { icon: 2, time: 1000 });
                }
              },
            });
          }
          return false;
        });

        tableSelect.render({
          elem: "#demo", //定义输入框input对象 必填
          checkedKey: "menuId", //表格的唯一建值，非常重要，影响到选中状态 必填
          searchKey: "menuName", //搜索输入框的name值 默认keyword
          searchPlaceholder: "菜单名称", //搜索输入框的提示文字 默认关键词搜索
          height: "400", //自定义高度
          width: "900", //自定义宽度
          table: {
            //定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: "/sys-dept/query",
            method: "post",
            cols: [
              [
                { type: "radio" },
                { field: "deptName", minWidth: 200, title: "部门名称" },
                {
                  field: "orderNum",
                  width: 80,
                  align: "center",
                  title: "排序号",
                },
              ],
            ],
          },
          done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            console.log(data);
            var NEWJSON = [];
            var names = [];
            layui.each(data.data, function (index, item) {
              NEWJSON.push(item.deptName);
              names.push(item.deptId);
            });
            elem.val(NEWJSON.join(","));
            $("[name='parentId']").val(names.join(","));
          },
        });
      });
    </script>
  </body>
</html>
